
import React, { memo } from 'react';
import sty from './sty.module.css'
import { Link } from 'react-router-dom'
import { Slider } from 'antd'
import { getSizeImage, formatDate, getPlayUrl } from "@/utils/format-utils.js";
const SongInfo = (props) => {
  const { curSong, progress, sliderChange, slideAfterChange, currentTime, } = props;
  const picUrl = curSong.al && curSong.al.picUrl; // 图片url
  const songName = curSong.name; // 歌曲名字
  const singerName = curSong.ar && curSong.ar[0].name; //作者名字
  const duration = curSong.dt; //播放总时间

  return (<div className='flex2'>
    <Link
      className={sty.image}
      to={`/song?id=${curSong.id}`}
    >
      <img src={getSizeImage(picUrl, 35)} alt="" />
    </Link>
    <div className={sty.playDetail}>
      <div className="song-info">
        <Link to={`/song?id=${curSong.id}`} className="song-name">
          {songName}
        </Link>
        <a href="/author" className="no-link singer-name">
          {singerName}
        </a>
      </div>
      <Slider
        defaultValue={0}
        value={progress}
        onChange={sliderChange}
        onAfterChange={slideAfterChange}
      />
    </div>
    <div className="song-time">
      <span className="now-time">{formatDate(currentTime, "mm:ss")}</span>
      <span className="total-time">
        {" "}
        / {duration && formatDate(duration, "mm:ss")}
      </span>
    </div>
  </div>)
}
export default memo(SongInfo)